<template>
  <div class="pos">
    <el-row>
      <el-col
        :span='8'
        class="pos-order"
      >
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="goodsName"
                label="商品名"
              ></el-table-column>
              <el-table-column
                prop="count"
                label="数量"
                width="50"
              ></el-table-column>
              <el-table-column
                prop="price"
                label="单价"
                width="70"
              ></el-table-column>
              <el-table-column
                label="操作"
                width="150"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="daleteOrder(scope.row)"
                  >删除</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="addOrderList(scope.row)"
                  >增加</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="reduceOrder(scope.row)"
                  >减少</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="total">
              <small>数量：</small>{{totalCount}}
              &nbsp;&nbsp;&nbsp;&nbsp;
              <small>金额：</small>{{totalMoney}}元
            </div>
            <div class="div-btn">
              <el-button type="warning">挂单</el-button>
              <el-button
                type="danger"
                @click="deleteList"
              >删除</el-button>
              <el-button
                type="success"
                @click="checkout"
              >结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单">挂单--</el-tab-pane>
          <el-tab-pane label="外卖">外卖--</el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span='16'>
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list">
            <ul>
              <li
                v-for="(good,index) in oftenGoods"
                :key='index'
                @click="addOrderList(good)"
              >
                <span>{{good.goodsName}}</span>
                <span class="o-price">￥{{good.price}}元</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
            <el-tab-pane
              v-for="(goods,i) in typeGoods"
              :key="i"
              :label="type[i]"
            >
              <div>
                <ul class="cookList">
                  <li
                    v-for="(good,j) in goods"
                    :key="j"
                    @click="addOrderList(good)"
                  >
                    <span class="footImg">
                      <img
                        :src="good.goodsImg"
                        width="100%"
                      />
                    </span>
                    <span class="foodName">{{good.goodsName}}</span>
                    <span class="foodPrice">￥{{good.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "pos",
  data() {
    return {
      tableData: [], //已点的商品列表
      oftenGoods: [], //常用商品列表
      typeGoods: [], //分类商品列表
      type: ["汉堡", "小食", "饮料", "套餐"], //商品分类
      totalCount: 0, //已点数量
      totalMoney: 0, //已记录金额
    };
  },
  mounted() {},
  //实例生成后
  created() {
    //取常用商品
    axios
      .get("/api/oftenGoods")
      .then((res) => {
        this.oftenGoods = res.data;
      })
      .catch((err) => {
        console.log("网络错误");
      });
    //取分类商品
    axios
      .get("/api/typeGoods")
      .then((res) => {
        this.typeGoods = res.data;
      })
      .catch((err) => {
        console.log("网络错误");
      });
  },
  ///方法集合
  methods: {
    //添加商品
    addOrderList(goods) {
      const tableHaveData = this.tableData.filter((g, i) => {
        g.index = i;
        return g.goodsId === goods.goodsId;
      }); //table中存在的数据
      if (tableHaveData.length === 0) {
        //不存在
        goods.count = 1;
        this.tableData.push(goods);
      } else {
        //已存在
        tableHaveData[0].count++;
        //强制更新数组
        this.$set(this.tableData, tableHaveData[0].index, tableHaveData[0]);
      }
      this.updateTotal();
    },
    //减少商品数量
    reduceOrder(goods) {
      goods.count--;
      if (goods.count > 0) {
        this.$set(this.tableData, goods.index, goods);
      } else if (goods.count === 0) {
        //删除
        this.daleteOrder(goods);
      }
      this.updateTotal();
    },
    //更新总数总金额
    updateTotal() {
      this.totalCount = 0;
      this.totalMoney = 0;
      this.tableData.forEach((good) => {
        this.totalCount += good.count;
        this.totalMoney = this.totalMoney + good.price * good.count;
      });
    },
    //删除指定商品
    daleteOrder(good) {
      this.tableData.splice(good.index, 1);
      console.log(this.tableData);
    },
    //删除所有选中商品
    deleteList() {
      this.tableData = [];
      this.updateTotal();
    },
    //结账
    checkout() {
      if (this.totalCount === 0) return;
      this.$message({
        message: "结账成功",
        type: "success",
      });
      this.deleteList();
    },
  },
};
</script>

<style>
.pos {
  /* background-color: #ccc; */
  text-align: center;
}
.pos-order {
  background-color: #f9fafc;
  padding-left: 5px;
  padding-right: 5px;
  height: 100vh;
}
.div-btn {
  margin-top: 10px;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
}
.often-goods-list ul li {
  list-style: none;
  float: left;
  border: 1px solid #6c99f3;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  cursor: pointer;
}
.o-price {
  color: #ff7158;
}
.goods-type {
  clear: both;
  margin-left: 50px;
  margin-bottom: 10px;
}
.cookList {
  padding-left: 0;
}
.cookList li {
  list-style: none;
  width: 110px;
  border: 1px solid #e5e9f2;
  height: auto;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  text-align: center;
  cursor: pointer;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 15px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.total {
  padding: 10px;
  background-color: #fff;
}
</style>
